<%--
  Created by IntelliJ IDEA.
  User: LP
  Date: 2020/6/15
  Time: 11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <base href="${APP_PATH}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>登录页面 - 光年(Light Year Admin)后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <link href="public/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="public/css/style.min.css" rel="stylesheet">
    <style>
        .lyear-wrapper {
            position: relative;
        }
        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }
        .lyear-login:after{
            content: '';
            min-height: inherit;
            font-size: 0;
        }
        .login-center {
            background: #fff;
            min-width: 29.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 3px;
            margin: 2.85714em;
        }
        .login-header {
            margin-bottom: 1.5rem !important;
        }
        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
        }
        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }
        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }
    </style>
</head>

<body>
<div class="row lyear-wrapper" style="background-image: url(public/images/login-bg-2.jpg); background-size: cover;">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <a href="javascript:void(0)"> <img alt="light year admin" src="public/images/logo-sidebar.png"> </a>
            </div>
            <form id="loginForm">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您的编号或是手机号" class="form-control" name="loginName" id="loginName" />
                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" class="form-control" id="upwd" name="upwd" />
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left row">
                    <div class="col-xs-7">
                        <input type="text" name="code" id="code" class="form-control" placeholder="验证码">
                        <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="col-xs-5">
                        <input type="hidden" id = "captchaVal" name = "captchaVal"/>
                        <img src="captcha"
                             alt="验证码" title = "点击切换，不区分大小写" width="100" height="32" class="passcode"
                             style="height: 43px; cursor: pointer;" onclick="change()" id = "captcha" name = "captcha">
                    </div>
                </div>

                <div class="form-group">
                    <button class="btn btn-block btn-primary" type="button"  id="loginBtn">立即登录</button>
                </div>
            </form>
            <hr>
            <footer class="col-sm-12 text-center">
                <p class="m-b-0">Copyright © 2019 <a href="http://lyear.itshubao.com">IT书包</a>. All right reserved</p>
            </footer>
        </div>
    </div>
</div>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="public/layer/layer.js"></script>
<script type="text/javascript">

    //获取验证码
    function change() {
        var src1 = document.getElementById('captcha');
        src1.src = "/captcha?" + Math.random();
    }


        $(function(){

        //初次获取验证码值
         $("#captcha").attr("src","/captcha?"+Math.random());



        $("#loginBtn").click(function () {
            var zzLoginName01 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            var zzLoginName02 = /^[A-Z]{2}[0-9]{12}$/
            var zzUpwd = /^[A-Za-z0-9]{6,12}$/;
            var zzCaptcha = /^[A-Za-z0-9]{4}$/;
            var loginNameVal = $("#loginName").val();
            var upwdVal = $("#upwd").val();
            var captchaVal = $("#code").val();

            if(!zzLoginName01.test(loginNameVal)){
                if(!zzLoginName02.test(loginNameVal)){
                    layer.msg("登录名错误，登录名为手机号或用户编号", {time:1000, icon:5, shift:6}, function () {});
                    return;
                }
            }
            if(!zzUpwd.test(upwdVal)){
                layer.msg("密码格式错误，长度6~12,包含大小写字母、数字", {time:1000, icon:5, shift:6}, function () {});
                return;
            }
            if(!zzCaptcha.test(captchaVal)){
                layer.msg("验证码格式错误，长度4，包含小写字母、数字", {time:1000, icon:5, shift:6}, function () {});
                return;
            }



            $.ajax({
                url:"login/loginDo",
                data:$("#loginForm").serialize(),
                type:"post",
                dataType:"json",
                success:function (result) {
                    if(result.result){
                        layer.msg("登录成功", {time:1000, icon:6, shift:6}, function () {
                            location.href = "main.jsp";
                        });
                    }else{
                        if(result.msg1 != null){
                            console.log("result.msg1");
                            console.log(result.msg1);
                            layer.msg(result.msg1, {time:1000, icon:5, shift:6}, function () {});
                        }else if(result.msg2 != null){
                            console.log("result.msg2");
                            console.log(result.msg2);
                            layer.msg(result.msg2, {time:1000, icon:5, shift:6}, function () {});
                        }else {
                            console.log("result.msg3");
                            console.log(result.msg3);
                            layer.msg(result.msg3, {time:1000, icon:5, shift:6}, function () {});
                        }


                    }
                }//success

            })//ajax
        });//点击登录
    })//入口
</script>
</body>
</html>
